<template>
  <div class="qiudong">
    <div class="pageHeader">
      球洞
      <img src="@/static/images/arrow-left.png" alt="" @click="back">
    </div>
    <div class="chang" v-for="(item,index) in list" :key="index">
      <div class="header">{{item.name}}场</div>
      <div class="list acea-row">
        <div class="item acea-row row-column" v-for="(item2,index2) in item.holes" :key="index2">
          <div class="d1 div acea-row row-middle row-center">{{item2.title}}</div>
          <div class="d2 div acea-row row-middle row-center">{{item2.standard}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "api"
import config from "api/config"
import axios from 'axios'
import { Toast } from 'vant'

export default {
  data() {
    return {
      list:{
        holes:[]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      Toast.loading({
        message:"加载中...",
        duration:0
      })
      let that = this
      let club_id = this.$route.params.id
      api.post("/index/fieldList",{club_id}).then(e=>{
        Toast.clear()
        let fields_data = e.data.fields.data
        for(let i of fields_data){
          let loop = 1
          let obj = {}
          let sum = 0
          for(let j of i.holes){
            j.title = i.name + loop
            sum = sum + parseInt(j.standard)
            loop++
          }
          obj.title = "TOT"
          obj.standard = sum
          i.holes.push(obj)
        }
        that.list = e.data.fields.data
        // console.log(this.list)
      })
    },
    back(){
      this.$router.go(-1);//返回上一层
    }
  },
}
</script>

<style scoped>
  .qiudong{
    min-height: 100vh;
    /* background-color: #f2f3f5; */
  }
  .chang .header{
    text-align: center;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    height: 80px;
    font-size: 32px;
    background-color: #ffffff;
  }
  .chang .list .item {
    margin-right: 4px;
  }
  .chang .list .item:last-of-type{
    margin-right: 0;
  }
  .chang .list .item .div{
    width: 71.4px;
    height: 71.4px;
    font-size: 26px;
  }
  .chang .list .item .d1{
    background-color: #2d8aea;
    color: #ffffff;
  }
  .chang .list .item .d2{
    background-color: #e6f2ff;
    color: #282828;
  }
</style>